<template>
    <div lang="audit_log">
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" :inline="true" :model="form">
                    <el-form-item label="名称:">
                        <el-input
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            v-model="query.name"
                            placeholder=""
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="审核人员:">
                        <el-input
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            v-model="query.auditBy"
                            placeholder=""
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button :disabled="disabled" type="primary" @click="handleSearch">
                            <!-- 查询 -->
                            {{ $t('m.queryBtn') }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column width="auto" label="ID" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>

                <el-table-column width="auto" label="名称" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column width="auto" label="类型" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.type == 1 ? '常规上线' : scope.row.type == 3 ? '紧急上线' : '' }}</template>
                </el-table-column>

                <el-table-column width="auto" label="审核人员" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.auditBy }}</template>
                </el-table-column>

                <el-table-column width="auto" label="审核时间" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.auditTime }}</template>
                </el-table-column>

                <el-table-column width="auto" label="审核结果" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{
                        scope.row.auditResult == 1 ? '通过' : scope.row.auditResult == -1 ? '不通过' : ''
                    }}</template>
                </el-table-column>

                <el-table-column width="auto" label="备注" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.remark }}</template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
  import NProgress from 'nprogress';
  import { debounce, throttle } from '@/utils/utils.js';
  export default {
      name: 'AuditLog',
      data() {
          return {
              disabled: false,
              query: {
                  auditBy: null,
                  name: null,
                  pageIndex: 1,
                  pageSize: 10
              },
              form: {},
              tableData: [],
              pageTotal: 0
          };
      },
      // created() {
      //     this.getData();
      // },
      watch: {
          $route: {
              deep: true,
              immediate: true,
              handler(a, b) {
                  console.log(a, b);
                  if (a.name === 'AuditLog_2') {
                      this.getData();
                  }
              }
          }
      },
      methods: {
          async getData() {
              try {
                  NProgress.start();
                  this.disabled = true;
                  let url = '/copauditlog/list';
                  let { data: res } = await this.$http[0].get(url, {
                      params: this.$removeField({
                          page: this.query.pageIndex,
                          size: this.query.pageSize,
                          name: this.query.name ? this.query.name.trim() : this.query.name,
                          auditBy: this.query.auditBy ? this.query.auditBy.trim() : this.query.auditBy
                      })
                  });
                  console.log(res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }

                  if (res.data.content && res.data.content.length > 0) {
                      // 中间处理
                      res.data.content.map((item) => {
                          item.auditTime = this.$dateFormat(item.auditTime, '', '-');
                          item.createTime = this.$dateFormat(item.createTime, '', '-');
                      });
                      // 赋值
                      this.tableData = res.data.content;
                      this.pageTotal = res.data.totalElements;
                  } else {
                      this.tableData = [];
                      this.pageTotal = 0;
                  }
                  NProgress.done();
                  this.disabled = false;
              } catch (err) {
                  console.log(err);
                  NProgress.done();
                  this.disabled = false;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          // handleSearch() {
          //     this.$set(this.query, 'pageIndex', 1);
          //     this.getData();
          // },

          handleSearch: debounce(function () {
              this.$set(this.query, 'pageIndex', 1);
              this.getData();
          }, 300),

          // 分页导航
          handlePageChange(val) {
              this.$set(this.query, 'pageIndex', val);
              this.getData();
          },
          handleSizeChange(val) {
              this.$set(this.query, 'pageSize', val);
              this.getData();
          }
      }
  };
</script>

<style lang="scss">
  #audit_log {
      .table-header {
          .cell {
              white-space: nowrap !important;
          }
      }
      .handle-box {
          margin-bottom: 20px;
      }

      .handle-select {
          width: 120px;
      }

      .handle-input {
          /* width: 300px; */
          width: 69px;
          height: 28px;
          display: inline-block;
      }
      .table {
          width: 100%;
          font-size: 14px;
      }
      /* .red {
      color: #ff0000;
  } */
      .mr10 {
          margin-right: 10px;
      }
      .table-td-thumb {
          display: block;
          margin: auto;
          width: 40px;
          height: 40px;
      }
  }
</style>
